<script setup>
import {inject, onMounted, ref, shallowRef} from "vue";

const form = ref({
	vipType: '副会长单位',
	companyType: '国有企业'
})

const createList = (list, ifTF = false) => {
	return list.map(item => ({
		label: item,
		value: ifTF ? item === '是' : item
	}));
}

const vipTypeList = createList(['副会长单位', '常务理事单位', '理事单位', '一般会员单位'])

const companyTypeList = createList(['国有企业', '集体企业', '集团公司', '股份有限公司', '一般企业', '中外合资', '其他', '外资企业', '港、澳、台商投资企业'])

const mimeList = [
	'image/jpeg',
]
</script>

<template>
	<div class="pageContent">
		<n-space
			align="center"
			justify="space-between"
			style="margin-bottom: 20px"
		>
			<n-h6 class="pageTitle" prefix="bar">
				<div>
					能力评价申请
				</div>
			</n-h6>
		</n-space>
		<n-divider
			class="pageDivider"
		></n-divider>
		<n-space justify="center">
			<div class="formTitle">
				安全技术防范工程企业基本情况表
			</div>
		</n-space>
		<n-form
			:label-placement="'left'"
			label-width="130"
			require-mark-placement="left"
			style="margin-bottom: 10px"
		>
			<n-grid :cols="4" :x-gap="10">
				<n-form-item-gi :span="2" label="单位名称" label-style="font-weight: bold">
					<n-input placeholder="单位名称"></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="2" label="注册地址" label-style="font-weight: bold">
					<n-input placeholder="注册地址"></n-input>
				</n-form-item-gi>
				
				<n-form-item-gi :span="1" label="法人代表" label-style="font-weight: bold">
					<n-input placeholder="法人代表"></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="职务/职称" label-style="font-weight: bold">
					<n-input placeholder="职务"></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="2" label="法人代表电话" label-style="font-weight: bold">
					<n-input placeholder="法人代表电话"></n-input>
				</n-form-item-gi>
				
				<n-form-item-gi :span="1" label="联系人" label-style="font-weight: bold">
					<n-input placeholder="联系人"></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="联系人职务" label-style="font-weight: bold">
					<n-input placeholder="联系人职务"></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="2" label="联系人电话" label-style="font-weight: bold">
					<n-input placeholder="联系人电话"></n-input>
				</n-form-item-gi>
				
				<n-form-item-gi :span="1" label="公司网址" label-style="font-weight: bold">
					<n-input placeholder="公司网址"></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="邮箱" label-style="font-weight: bold">
					<n-input placeholder="邮箱"></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="2" label="通信地址" label-style="font-weight: bold">
					<n-input placeholder="通信地址"></n-input>
				</n-form-item-gi>
				
				<n-form-item-gi :span="4" label="申请会员类别" label-style="font-weight: bold">
					<n-radio-group v-model:value="form.vipType">
						<n-space>
							<n-radio v-for="item in vipTypeList" :key="item.value" :value="item.value">
								{{item.label}}
							</n-radio>
						</n-space>
					</n-radio-group>
				</n-form-item-gi>
				
				<n-form-item-gi :span="1" label="成立时间" label-style="font-weight: bold">
					<n-date-picker style="width: 100%"></n-date-picker>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="隶属" label-style="font-weight: bold">
					<n-input placeholder="隶属"></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="注册资金" label-style="font-weight: bold">
					<n-input placeholder="通信地址"></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="公司总人数" label-style="font-weight: bold">
					<n-input placeholder="公司总人数"></n-input>
				</n-form-item-gi>
				
				<n-form-item-gi :span="2" label="大专及以上" label-style="font-weight: bold">
					<n-input placeholder="大专及以上人数"></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="高工" label-style="font-weight: bold">
					<n-input placeholder="高工人数"></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="工程师" label-style="font-weight: bold">
					<n-input placeholder="工程师人数"></n-input>
				</n-form-item-gi>
				
				<n-form-item-gi :span="2" label="技术员" label-style="font-weight: bold">
					<n-input placeholder="技术员人数"></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="2" label="助工" label-style="font-weight: bold">
					<n-input placeholder="助理工程师人数"></n-input>
				</n-form-item-gi>
				
				<n-form-item-gi :span="4" label="单位类型" label-style="font-weight: bold">
					<n-radio-group v-model:value="form.vipType">
						<n-space>
							<n-radio v-for="item in companyTypeList" :key="item.value" :value="item.value">
								{{item.label}}
							</n-radio>
						</n-space>
					</n-radio-group>
				</n-form-item-gi>
				
				<n-form-item-gi :span="2" label="经营范围" label-style="font-weight: bold">
					<n-input
						type="textarea"
						placeholder="经营范围"
						:autosize="{
							minRows: 5,
						}"
					></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="2" label="单位资质" label-style="font-weight: bold">
					<n-input
						type="textarea"
						:autosize="{
							minRows: 5,
						}"
						placeholder="提示：请简要填写何年何月通过何种资质或认证等情况（如技防工程资质证书、生产等级批准证 书、3C认证证书及质量认证体系，且注明证书编号或注册号）"
					></n-input>
				</n-form-item-gi>
				
				<n-form-item-gi :span="2" label="企业业绩汇总表" label-style="font-weight: bold">
					<n-space justify="center" align="center">
						<n-upload
							:accept="mimeList"
							style="width: fit-content;"
						>
							<n-button>上传图片</n-button>
						</n-upload>
						<div class="placeholder">提示：盖上公章上传为jpg格式</div>
					</n-space>
				</n-form-item-gi>
				<n-form-item-gi :span="2" label="固定技术人员名单" label-style="font-weight: bold">
					<n-space justify="center" align="center">
						<n-upload
							:accept="mimeList"
							style="width: fit-content;"
						>
							<n-button>上传图片</n-button>
						</n-upload>
						<div class="placeholder">提示：盖上公章上传为jpg格式</div>
					</n-space>
				</n-form-item-gi>
				
				<n-form-item-gi :span="2" label="能力评价申请表" label-style="font-weight: bold">
					<n-space justify="center" align="center">
						<n-upload
							:accept="mimeList"
							style="width: fit-content;"
						>
							<n-button>上传图片</n-button>
						</n-upload>
						<div class="placeholder">提示：盖上公章上传为jpg格式</div>
					</n-space>
				</n-form-item-gi>
				<n-form-item-gi :span="2" label="企业营业执照" label-style="font-weight: bold">
					<n-space justify="center" align="center">
						<n-upload
							:accept="mimeList"
							style="width: fit-content;"
						>
							<n-button>上传图片</n-button>
						</n-upload>
						<div class="placeholder">提示：盖上公章上传为jpg格式</div>
					</n-space>
				</n-form-item-gi>
				
				<n-form-item-gi :span="4" label="守信公约" label-style="font-weight: bold">
					<n-space justify="center" align="center">
						<n-upload
							:accept="mimeList"
							style="width: fit-content;"
						>
							<n-button>上传图片</n-button>
						</n-upload>
						<div class="placeholder">提示：盖上公章上传为jpg格式</div>
					</n-space>
				</n-form-item-gi>
			</n-grid>
		</n-form>
		
		<n-space
			justify="center"
		>
			<n-button
				type="primary"
			>
				提交
			</n-button>
		</n-space>
	</div>
</template>

<style scoped>
	.formTitle {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 20px;
	}
	.placeholder {
		color: rgba(194, 194, 194, 1);
	}
</style>
